<template>
  <div class="join-addEdit">
    <el-dialog :append-to-body="true" :title="title" v-model="show" @close="cancelFun" destroy-on-close>
      <el-form :model="form" ref="formRef" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="名称:" prop="name">
          <el-input type="text" placeholder="请输入内容" size="large" v-model="form.name" maxlength="50" show-word-limit> </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelFun" size="large">取消</el-button>
          <el-button type="primary" @click="confirmFun" size="large">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { computed, onMounted, onUnmounted, ref, watch, defineEmits, reactive } from 'vue'

const props = defineProps({
  type: {
    type: String,
    default: null
  },
  status: {
    type: String,
    default: null
  },
  show: {
    type: Boolean,
    default: null
  },
  addEditData: {
    type: Object,
    default: {
      id: '',
      name: ''
    }
  }
})

console.log(props.addEditData)

const formRef = ref()

const form = reactive({
  id: '',
  name: ''
})

const rules = reactive({
  name: [{ required: true, message: '文章标题不能为空!', trigger: 'blur' }]
})

const emit = defineEmits(['change-addEdit'])

const title = computed(() => {
  return (props.status == 'add' ? '添加' : '编辑') + (props.type == 'left' ? '大类' : '小类')
})

function confirmFun() {
  formRef.value.validate((valid) => {
    if (valid) {
      emit('change-addEdit', form, props.status, props.type)
    }
  })
}

function cancelFun() {
  emit('change-addEdit', form, 'cancel', props.type)
}

watch(
  () => props.addEditData,
  (newValue, oldValue) => {
    form.id = newValue.id
    form.name = newValue.name
    console.log(form)
  },
  { deep: true }
)
</script>
<style lang="scss" scoped>
.news-addEdit {
}
</style>
